<template>
  <el-dialog v-model="showTrackTableDialog" title="航迹线列表" draggable :modal="false" overflow
    :close-on-click-modal="false" :append-to-body="true" :id="props.dioid" :align-center="false" @close="onCancel">
    <el-table :data="props.data" border style="width: 100%">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column prop="properties.layerName" label="名字"></el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { postAddpoint, putpoint } from "@/api/index.js";
import { armyMarkobj, getArmyMarkValue, ColorStyle } from "@/utils/compnt.js";
const props = defineProps({
  showTrackTableDialog: {
    type: Boolean,
    default: false,
  },
  dioid: {
    type: String,
    default: "",
  },
  data: {
    type: Array,
    default: null,
  },
});

const emits = defineEmits(["pointfromcol", "close"]);
const handleClick = (row) => {
  console.log(row);
  // emits("pointfromcol", row.properties);
  const event = new CustomEvent("track-table-click", { detail: row });
  window.dispatchEvent(event);
  showTrackTableDialog.value = false;
};
const submitForm = async () => {
  // props.pointfrom.StartP.Lon = Number(props.pointfrom.StartP.Lon);
  // props.pointfrom.StartP.Lat = Number(props.pointfrom.StartP.Lat);
  // props.pointfrom.StartP.Alt = Number(props.pointfrom.StartP.Alt);
  // console.log(props.pointfrom);
  // try {
  //   if (props.isapi) {
  //     const response = await putpoint(props.pointfrom);
  //     console.log("请求成功:", response);
  //   } else {
  //     const response = await postAddpoint(props.pointfrom);
  //     console.log("请求成功:", response);
  //   }
  //   onCancel();
  //   // 可以在这里处理响应数据
  // } catch (error) {
  //   console.error("请求失败:", error);
  //   // 可以在这里处理错误信息
  // }
};

const onCancel = () => {
  const event = new CustomEvent("track-table-cancel");
  window.dispatchEvent(event);
};

const onDialogClose = () => {
  // const event = new CustomEvent("draw-point-close");
  // window.dispatchEvent(event);
};

const showTrackTableDialog = ref(props.showTrackTableDialog);

// 监听 props 变化以同步本地状态
watch(
  () => props.showTrackTableDialog,
  (newValue) => {
    console.log("showTrackTableDialogDialog", newValue);
    showTrackTableDialog.value = newValue;
  }
);

//
const changecolor = (color) => {
  props.pointfrom.Icon.ColorData = color;
  props.pointfrom.Icon.IconColor = ColorStyle(color, 1);
  // emits('pointfromcol', props.pointfrom)
};

const changefrom = (data) => {
  emits("pointfromcol", props.pointfrom);
};

const changejbtype = (type) => {
  props.pointfrom.Icon.LibID = getArmyMarkValue(type).LibID;
  props.pointfrom.Icon.Code = getArmyMarkValue(type).Code;
};
</script>